<template>
	<view>
		<view class="tabbar">
			<view v-for="(item, index) in tabList" :key="index" @click="switchTab(item.url)">
				<view class="plus" v-if="index == 2">
					<uv-icon name="plus" size="24" color="#fff"></uv-icon>
				</view>
				<view class="tab" v-else>
					<uv-icon :name="item.icon" size="30" :color="active == index ? themeColor : ''"></uv-icon>
					<view :class="active == index ? 'tab-active' : ''">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<uv-popup ref="popup" mode="bottom" round="16">
			<view class="popup-wrapper">
				<view class="popup-button">
					<image src="@/static/icon//star-ticket.png" mode="scaleToFill" />
					<view class="popup-text" @click="toCreatePost">
						<view class="popup-title">发布帖子</view>
						<view class="popup-desc">分享你的旅行故事和精彩瞬间</view>
					</view>
				</view>
				<view class="popup-button">
					<image src="@/static/icon/route.png" mode="scaleToFill" />
					<view class="popup-text">
						<view class="popup-title">发布路线</view>
						<view class="popup-desc">规划并分享你的专业旅游路线</view>
					</view>
				</view>
			</view>
		</uv-popup>
		<uv-gap height="50"></uv-gap>
	</view>
</template>

<script>
export default {
	name: 'tabbar',
	props: {
		active: {
			type: Number,
			default: 0
		}
	},
	computed: {},
	data() {
		return {
			tabList: [
				{
					name: '首页',
					url: '/pages/index/index',
					icon: 'home',
					active: false
				},
				{
					name: 'AI',
					url: '/pages/ai/ai',
					icon: 'chat',
					active: false
				},
				{
					name: '',
					url: '/pages/createPost/createPost',
					icon: 'plus-circle',
					active: false
				},
				{
					name: '广场',
					url: '/pages/square/square',
					icon: 'grid',
					active: false
				},
				{
					name: '我的',
					url: '/pages/me/me',
					icon: 'account',
					active: false
				}
			]
		};
	},
	methods: {
		switchTab(url) {
			if (url == '/pages/createPost/createPost') {
				this.$refs.popup.open();
			} else {
				uni.switchTab({ url });
			}
		},
		toCreatePost() {
			this.$refs.popup.close();
			uni.navigateTo({ url: '/pages/createPost/createPost' });
		}
	}
};
</script>

<style lang="scss" scoped>
.tabbar {
	background-color: #fff;
	width: 750rpx;
	height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	padding-bottom: env(safe-area-inset-bottom);
	padding: 15rpx 0;
	display: flex;
	justify-content: space-around;

	.tab {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		align-items: center;
		width: 80rpx;

		&-active {
			color: $theme-color;
		}
	}


	.plus {
		width: 80rpx;
		height: 80rpx;
		background-color: $theme-color;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto 25rpx;
	}

	.plus:active {
		background-color: $theme-color-dark;
	}
}

.popup-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 20rpx;
	padding-top: 50rpx;

	.popup-button {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		border-radius: 25rpx;
		padding: 20rpx 40rpx;
		background-color: #fff;
		box-shadow: 0 3px 9px #eee;
		transition: all 0.1s;

		&:active {
			background-color: #eee;
		}

		image {
			width: 48rpx;
			height: 48rpx;
		}


		.popup-text {
			margin-left: 20rpx;

			.popup-title {
				font-size: 28rpx;
				font-weight: bold;
			}

			.popup-desc {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}
</style>
